<template>
      <div class="topbar">
        <div class="topbarwarp wrap">
          <div class="left">欢迎来到叩丁严选</div>
          <ul class="right">
            <li>
              <!-- <img src="../assets/img/userImg.f8bbec5e.png" alt="" /> -->
              用户名：游客
            </li>
            <li>我的鸡腿：--</li>
            <li>获取鸡腿</li>
            <li>扣丁狼官网</li>
            <li class="cart-btn">
              <img src="../assets/img/cart.png" alt="" />
              <span>购物车</span>
              <strong>66</strong>
            </li>
            <li>登录</li>
          </ul>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data(){
        
      }
    };
    </script>
    
    <style lang="less" scoped> 
    .topbar{
        height: 40px;
        width: 100vw;
        line-height: 40px;
        background: linear-gradient(90deg, #F05F57, #360940 );
        font-family: SourceHanSansSC;
        font-size: 14px;
        font-weight: 300;
        color: #FFFEFE;
        .topbarwarp{
            display: flex;
            justify-content: space-between;
            .right{
                li{
                    float: left;
                    padding: 0 10px;
                    text-align: center;
                    cursor: pointer;
                    img {
                        width: 23px;
                        height: 22px;
                        border-radius: 13px;
                        vertical-align: middle;
                    }
                    &.loginbtn{
                        width: 124px;
                        height: 40px;
                        background: linear-gradient(90deg, #6FFF99, #1450CC );;
                    }

                }
                .cart-btn {
                    width: 124px;
                    height: 40px;
                    background: linear-gradient(90deg, #6FFF99, #1450CC );
                    text-align: center; 
                    img{
                    width: 20px;
                    height: 19px;
                    vertical-align: middle;
                    }
                    span{
                    margin: 0 8px;
                    }
                    strong{
                    width: 22px;
                    height: 22px;
                    line-height: 22px;
                    display: inline-block;
                    border-radius: 50%;
                    background-color: #fd604d;
                    }
                }
            }
        }
    }

</style>